![Jetpack Composeのデモアプリを動かしてみた #io19 #io19jp](https://devio2023-media.developers.io/wp-content/uploads/2019/04/google-io2019-eyecatch-1200x630.png)
Jetpack Composeのデモアプリを動かしてみた #io19 #io19jp
Google I/O 2019のDeveloper KeynoteでJetpack Composeが発表されました。
2019年05月07日の発表後にオープンソースのプロジェクトとして公開された段階で、まだライブラリとしては配布されていません。この記事では、AOSP(Android Open Source Project)に含まれているJetpack Composeのソースコードをビルドして試すための手順を記載します。
Jetpack Composeとは
Jetpack Composeは、FlutterやReactのように宣言的な記述でUIを構築、リアクティブプログラミングが行えるUIツールキットです。
図は「Google Developers Japan: Android Jetpack の新機能」より引用
Repoコマンドのインストール
方法1 スクリプトファイルをダウンロードする
PATHが通っているディレクトリにrepoのスクリプトファイルをダウンロードして、実行権限を追加します。
$ curl https://storage.googleapis.com/git-repo-downloads/repo > $HOME/bin/repo $ chmod a+x $HOME/bin/repo
方法2 Homebrewでインストールする
Homebrewが導入されている場合は、次のようにインストールできます。
$ brew install repo
AndroidXのリポジトリのダウンロード
まず、リポジトリをダウンロードするディレクトリを作成します(この記事ではホームディレクトリにandroidx-master-dev
を作成します)。
$ mkdir $HOME/androidx-master-dev
次に、作成したディレクトリに移動して、repoコマンドで初期化します。
$ cd $HOME/androidx-master-dev $ repo init -u https://android.googlesource.com/platform/manifest -b androidx-master-dev ... Your identity is: XXX <xxx@example.com> If you want to change this, please re-run 'repo init' with --config-name repo has been initialized in /Users/xxx/androidx-master-dev
最後に、AndroidXのソースコードをダウンロードします。約6GBあるので少し時間がかかります。ストレージの空き容量に気を付けてください。
repo sync -j8 -c
推奨のAndroid Studioのダウンロードと起動
Jetpack Composeのディレクトリ(frameworks/support/ui
)に移動して、Jetpack Compose自体の開発で推奨されているAndroid Studioをダウンロードします。最後にライセンスへの同意を求められます。
$ cd $HOME/androidx-master-dev/frameworks/support/ui $ ./studiow ... (zipファイルのダウンロードと解凍、Gradleまわりのセットアップが走る?) Do you accept the license agreement at /Users/XXX/androidx-master-dev/frameworks/support/ui/studio/android-studio-ide-183.5543569-mac/Android Studio.app/Contents/Resources/LICENSE.txt [Y/n]?
y Enter
を入力して同意すると自動でAndroid Studioが起動して、frameworks/support/ui
のプロジェクトが開かれます。
Android Studioのダウンロードなどは初回のみです。同じコマンドを使用して、Android Studioでプロジェクトを開き直すことができます。
$ cd $HOME/androidx-master-dev/frameworks/support/ui $ ./studiow
デモアプリの実行
プロジェクトに、ui-demos
とui-material-studies
の2つのデモアプリが含まれているので、それぞれ実行してみます。
ui-demos
ui-demos
のアプリでは、Jetpack ComposeのUIコンポーネントごとに用意されたデモ画面を表示できます。
たとえば、Material > Floating Action Button
では、FABの表示が確認できます。
ui-material-studies
ui-material-studies
のアプリでは、Material studiesに対する実装が確認できます。
2019年06月05日時点で、Rally の一部が実装されていることを確認できました。
Jetpack Compopseのコードを確認
さきほどのui-demos
とui-material-studies
のUIは、両方ともJetpack Composeで実装されています。
ui-demos
のアプリのMaterial > Floating Action Button
の画面の実装は、ui-material-demos
モジュールのFloatingActionButtonDemo.kt
に記述されています。
/* * Copyright 2019 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ package androidx.ui.material.demos import android.util.Log import androidx.ui.core.CraneWrapper import androidx.ui.layout.Center import androidx.ui.layout.Column import androidx.ui.layout.MainAxisAlignment import androidx.ui.material.FloatingActionButton import androidx.ui.material.MaterialTheme import androidx.ui.painting.Image import androidx.compose.Composable import androidx.compose.composer @Composable fun FloatingActionButtonDemo(icon: Image) { CraneWrapper { MaterialTheme { Center { val onClick: () -> Unit = { Log.e("FABDemo", "onClick") } Column(mainAxisAlignment = MainAxisAlignment.SpaceEvenly) { FloatingActionButton(icon = icon, onClick = onClick) FloatingActionButton(text = "EXTENDED", onClick = onClick) FloatingActionButton(icon = icon, text = "ADD TO FAVS", onClick = onClick) } } } } }
これでJetpack Composeのコードを読んだり、自分で書いてみることができますね。